<template>
	<!-- 订单列表 -->
	<view class="order-item flex-column bgfff">
		<view class="i-top b-b flex-center-between">
			<text class="font26 color666" @tap="navToDetailPage(item)">订单编号：{{ item.orderNo }}</text>
			<text class="font28" :style="{ color: orderStateColor(item.orderStatus) }" @tap="navToDetailPage(item)">{{ orderStateText(item.orderStatus) }}</text>
		</view>
	
		<view class="goods-box">
			<view v-for="(goodsItem, goodsIndex) in item.orderListItemInfos" :key="goodsIndex" class="goods-item flex-center">
				<img class="goods-img" :src="goodsItem.image" @tap="navToDetailPage(item)" mode="aspectFill"></img>
				<view class="right flex-column-between" @tap="navToDetailPage(item)">
					<view class="info flex-column">
						<view class="title show-two-text font28 color333">{{ goodsItem.title }}</view>
						<view class="attr-box font24 color999">{{ goodsItem.skuAttr }}</view>
					</view>
					<view class="prcie-b flex-center-between">
						<view class="price flex-center">
							<text class="font24 colorred">￥</text>
							<text class="font30 colorred">{{ goodsItem.price }}</text>
						</view>
						<text class="font26 color666">x{{ goodsItem.productQuantity }}</text>
					</view>
				</view>
			</view>
		</view>
	
		<view class="price-box font30 color666 flex-center-between">
			<text>共{{ item.orderListItemInfos.length }}件商品</text>
			<view class="flex-center">
				<text>合计:</text>
				<text class="font24 colorred fontb">¥</text>
				<text class="font32 colorred fontb">{{ item.payAmount }}</text>
			</view>
		</view>
		<view class="action-box flex-center b-t">
			<button v-if="item.orderStatus === 3 && item.isComment === 1" class='action-btn' @tap="toEvaluate(item.orderId)">评价</button>
			<button v-if="item.orderStatus === 3 || item.orderStatus === 4" class="action-btn" @tap="deleteOrder">删除订单</button>
			<button v-if="item.orderStatus === 2" class="action-btn" @tap="toTrack(item.deliverySn)">查看物流</button>
			<button v-if="item.orderStatus === 0" class="action-btn" @tap="cancelOrder">取消订单</button>
			<button v-if="item.orderStatus === 0" class="action-btn recom" @tap="payOrder">立即支付</button>
			<button v-if="item.orderStatus === 3" class="action-btn recom" @tap="againPay">再次购买</button>
			<button v-if="item.orderStatus === 1" class="action-btn recom" @tap="remindSend">提醒发货</button>
			<button v-if="item.orderStatus === 2" class="action-btn recom" @tap="confimDelivery">确认收货</button>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api'
export default {
	data() {
		return {
			
		}
	},
	methods: {
		// 提醒发货
		remindSend() {
			this.$api.msg('已经提醒卖家发货，请等待！')
		},
		// 再次购买
		againPay() {
			uni.showModal({
				content: '订单中的商品都卖光啦，再看看其他商品吧～',
				showCancel: false,
			})
		},
		//详情
		navToDetailPage(item, index) {
			uni.navigateTo({ url: `/pages/order/orderDetail?id=${item.orderId}&index=${this.index}` })
		},
		//删除订单
		deleteOrder() {
			uni.showModal({
				content: '确定要删除吗？',
				success: (res) => {
					if (res.confirm) {
						this.del()
					}
				}
			})
		},
		// 删除
		async del() {
			let data = Api.apiCall('post', Api.order.delOrder, {orderId: this.item.orderId}, true)
			if(data) {
				this.$api.msg('删除成功')
				this.$emit('del', this.index)
			}
		},
		//取消订单
		cancelOrder() {
			uni.showModal({
				content: '确定要取消订单？',
				success: (res) => {
					if (res.confirm) {
						this.cancel()
					}
				}
			})
		},
		// 取消
		async cancel() {
			let data = await Api.apiCall('post', Api.order.cancelOrder, {orderId: this.item.orderId}, true)
			if(data) {
				this.$api.msg('取消成功')
				this.$emit('cancel', this.index)
			}
		},
		//立即支付
		async payOrder() {
			this.$emit('pay', this.item.payAmount, this.item.orderId)
		},
		//订单确认收货
		async confimDelivery() {
			let data = await Api.apiCall('post', Api.order.confimOrder, {orderId: this.item.orderId}, true)
			if (data) {
				this.$api.msg('确认收货成功')
				this.$emit('confimOrder', this.index)
			}
		},
		// 去评价
		toEvaluate(orderId) {
			this.$common.navigateTo('/pages/comment/publishComment?orderId=' + orderId)
		},
		// 查看物流
		toTrack(id) {
			this.$common.navigateTo('/pages/order/track?id=' + id)
		},
		//订单状态文字
		orderStateText(value) {
			let stateTip = ''
			if (value === 0) {
				stateTip = '等待付款'
			} else if (value === 1) {
				stateTip = '等待发货'
			} else if (value === 2) {
				stateTip = '等待收货'
			} else if (value === 3) {
				stateTip = '交易成功'
			} else if (value === 4) {
				stateTip = '交易关闭'
			} else {
				stateTip = '等待付款'
			}
			return stateTip
		},
		
		//订单状态颜色
		orderStateColor(value) {
			let stateTipColor = '#E4601C'
			if (value === 3) {
				stateTipColor = '#999'
			} else if (value === 4) {
				stateTipColor = '#999'
			} 
			return stateTipColor
		},
		
		
	},
	props: ['item', 'index']
}
</script>

<style lang="scss">
.order-item {
	border-radius: 8rpx;
	margin: 20rpx 20rpx 0;
	box-shadow:0px 2px 10px 0px rgba(153,153,153,0.2);
	.i-top {
		height: 90rpx;
		line-height: 90rpx;
		padding: 20rpx;
		position: relative;
	}
	.goods-box {		min-height: 238rpx;		padding: 0 20rpx;
		background-color: #F9F9F9;		.goods-item {			padding: 30rpx 0;			width: 100%;			height: 238rpx;			&:not(:last-child) {				border-bottom: 1rpx solid #DDD;			}			.goods-img {				width: 178rpx;				height: 178rpx;
				border-radius: 3rpx;
				margin-right: 21rpx;			}
			.right {
				width: calc(100% - 200rpx);
				height: 178rpx;
				.info {
					transform: translateY(-2px);
					.title {
						line-height: 42rpx;
					}
					.attr-box {
						margin-top: 12rpx;
					}
				}
				.prcie-b {
					transform: translateY(5px);
					.price {
						align-items: baseline;
					}
				}
			}		}	}
	.price-box {
		padding: 0 20rpx;
		height: 100rpx;
		&>view{
			align-items: baseline;
		}
	}

	.action-box {
		justify-content: flex-end;
		height: 100rpx;
		position: relative;
		padding-right: 30rpx;
		.action-btn {
			margin: 0;
			width: 160rpx;
			height: 64rpx;
			margin-left: 20rpx;
			padding: 0;
			text-align: center;
			line-height: 64rpx;
			font-size: 28rpx;
			color: #666;
			background-color: #fff;
			border-radius: 32rpx;
			border: 1rpx solid #AAA;
			&:after {
				border: 0;
			}
			&.recom {
				border: 0;
				background: #C84739;
				color: #fff;
				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}
}
</style>
